<template>
    <el-table
      :data="tableData.filter(data => !search || data.sname.toLowerCase().includes(search.toLowerCase()))"
      stripe
      style="width: 100%">
      <el-table-column
        prop="sid"
        label="歌曲ID"
        width="80">
      </el-table-column>
      <el-table-column
        prop="tid"
        label="类别ID"
        width="80">
      </el-table-column>
      <el-table-column
        prop="srid"
        label="歌手ID"
        width="80">
      </el-table-column>
      <el-table-column
        prop="aid"
        label="唱片ID"
        width="80">
      </el-table-column>
      <el-table-column
        prop="sname"
        label="歌曲名称"
        width="100">
      </el-table-column>
      <el-table-column
        prop="pic"
        label="图片地址"
        width="100">
      </el-table-column>
      <el-table-column
        prop="mp3"
        label="歌曲地址"
        width="100">
      </el-table-column>
      <el-table-column
        prop="lrc"
        label="歌词"
        width="100">
      </el-table-column>
      <el-table-column
        prop="is_hot"
        label="是否热点"
        width="80">
      </el-table-column>
      <el-table-column
        prop="is_new"
        label="是否最新"
        width="80">
      </el-table-column>
      <el-table-column
        prop="ptimes"
        label="发行时间"
        width="80">
      </el-table-column>
      <el-table-column
        prop="audit_status"
        label="审核状态"
        width="80">
      </el-table-column>
      <el-table-column
        prop="show_status"
        label="上架状态"
        width="80">
      </el-table-column>
      <el-table-column align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      <el-dialog class="dlg" style="width: 1000px;height: 1000px;" title="歌曲信息" :visible.sync="zdydialog" :append-to-body="true">
      <el-form :model="updateform" ref="FormRef">
        <el-form-item label="歌曲名称" width="80px">
          <el-input class="dialog_input" v-model="updateform.user_id" ></el-input>
        </el-form-item>

        
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
        
      </div>
    </el-dialog>
    </el-table-column>
     
  </el-table>
  </template>

<script>

export default {
  data() {
    return {
      tableData: [],
      search: "",
      updateform: {
        sid:'',
        sname:'',

    },
    };
  },
  created() {
    this.getTableData()
  },
  methods: {
    handleEdit(index, row) {
      this.updateform = row;     //将该行对象数据直接赋给form
      this.zdydialog = true; //自定义对话框展示
    },
    async handleDelete(index, row) {
      let pp = new URLSearchParams();
        pp.append('sid',row.sid);
        const res=await this.$http.post("music/deteleSongBean", pp )
        console.log(res);
        if(res.data.status==0){
          this.$message.success(res.data.msg);
          this.tableData.splice(index, 1);
        }else{
          this.$message.error(res.data.msg);
        }
    },
    submit() {
      this.$refs.FormRef.validate(async (valid) => {
        if (!valid) return;

        let param = new URLSearchParams()
                param.append('sid',this.updateform.sid);

                const res = await this.$http.post("music/updateSongBean",param);
                console.log(res);
        
        if (res.data.status) return this.$message.error(res.data.msg);
        this.$data.loading = true;
        this.$message.success(res.data.msg); 
      });
      this.zdydialog = false;

    },
    cancel() {

this.zdydialog = false;
},
    async getTableData() {
      const resAllData = await this.$http.get('music/findSong',{params:{sname:""}});
      this.tableData = resAllData.data.data;
      console.log(this.tableData);
    },
  },
};
</script>
<style scoped>

.dlg {
  left: 20%;
  top: -10%;
  margin: 0px !important;
  
}
</style>